<%@ page import="org.springframework.web.context.WebApplicationContext" %>
<%@ page import="org.springframework.web.context.support.WebApplicationContextUtils" %>
<%@ page import="com.party.mem.biz.system.menu.MenuBizService" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%
    ServletContext context = request.getSession().getServletContext();
    WebApplicationContext wac = WebApplicationContextUtils.getRequiredWebApplicationContext(context);
    MenuBizService menuService = (MenuBizService) wac.getBean("menuBizService");
    List<Map> maps = menuService.buildWebData(true);
    request.setAttribute("webMenu", maps);
%>
<%--<div class="fix-menu-btn"><i class="iconfont icon-right"></i></div>--%>
<!--侧边栏-->
<aside class="mu-aside">
    <div class="aside-scroll">
        <i class="aside-bg"></i>
        <div class="aside-main">
            <shiro:hasRole name="partner">
                <c:if test="${!sessionScope.newCurrentUser.twoLevelChildren}">
                    <li class="aside-first">
                        <%--<ul class="aside-dd">--%>
                            <%--<li class="aside-second">--%>
                                <%--<a href="${ctx}/merchant/analyze/detail.do"--%>
                                   <%--class="aside-nav " data-title="主页" title="主页">--%>
                                    <%--<i class="menu-icon iconfont icon-home"></i><span class="menu-name">主页</span>--%>
                                <%--</a>--%>
                            <%--</li>--%>
                        <%--</ul>--%>
                    </li>
                </c:if>
                <c:if test="${(webMenu==null || fn:length(webMenu) == 0) && !sessionScope.newCurrentUser.child}">
                    <li class="aside-first">
                        <ul class="aside-dd">
                            <li class="aside-second">
                                <a href="${ctx}/serviceOrder/list.do"
                                   class="aside-nav " data-title="服务订购" title="服务订购">
                                    <i class="menu-icon iconfont icon-home"></i><span class="menu-name">服务订购</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </c:if>
            </shiro:hasRole>
            <c:forEach var="map" items="${webMenu}">
                <li class="aside-first">
                    <div class="aside-dt"><i class="menu-icon iconfont ${map.icon}"></i><span
                            class="menu-name">${map.name}</span></div>
                    <ul class="aside-dd">
                        <c:forEach var="child" items="${map.children}">
                            <li class="aside-second">
                                <c:if test="${fn:length(child.children) > 0}">
                                    <div class="aside-dt"><i
                                            class="menu-icon iconfont ${child.icon}"></i><span
                                            class="menu-name">${child.name}</span><i
                                            class="iconfont icon-right"></i>
                                    </div>
                                    <ul class="aside-dd" style="height: 0">
                                        <c:forEach var="thirdChild" items="${child.children}">
                                            <li class="aside-third">
                                                <a href="${ctx}${thirdChild.href}" data-tag="${thirdChild.rule}"
                                                   title="${thirdChild.name}"
                                                   class="aside-nav " data-title="${thirdChild.name}">
                                                    <i class="menu-icon iconfont ${thirdChild.icon}"></i><span
                                                        class="menu-name">${thirdChild.name}</span>
                                                </a>
                                            </li>
                                        </c:forEach>
                                    </ul>
                                    <div class="aside-second-hide">
                                        <div class="aside-dt"><span class="menu-name">${child.name}</span></div>
                                        <ul class="aside-dd">
                                            <c:forEach var="thirdChild" items="${child.children}">
                                                <li class="aside-third">
                                                    <a href="${ctx}${thirdChild.href}" data-tag="${thirdChild.rule}"
                                                       title="${thirdChild.name}"
                                                       class="aside-nav " data-title="${thirdChild.name}">
                                                        <i class="menu-icon iconfont ${thirdChild.icon}"></i><span
                                                            class="menu-name">${thirdChild.name}</span>
                                                    </a>
                                                </li>
                                            </c:forEach>
                                        </ul>
                                    </div>
                                </c:if>
                                <c:if test="${fn:length(child.children) == 0}">
                                    <a href="${ctx}${child.href}" data-tag="${child.rule}" title="${child.name}"
                                       class="aside-nav " data-title="${child.name}">
                                        <i class="menu-icon iconfont ${child.icon}"></i><span
                                            class="menu-name">${child.name}</span>
                                    </a>
                                </c:if>
                            </li>
                        </c:forEach>
                    </ul>
                </li>
            </c:forEach>
        </div>
    </div>
</aside>
<script type="text/javascript">
    var navItemH = 41;
    var url = window.location.href, findActive = false;
    $('.fix-menu-btn').click(function (e) {
        if (!$('.aside-shade').length) {
            $('body').append('<div class="aside-shade"></div>');
            $('.aside-shade').click(function (e) {
                $('body').removeClass('aside-open');
            });
        }
        $('body').addClass('aside-open');
    });
    // 定位显示
    $('.aside-nav').each(function () {
        var item = this;
        var tagsStr = $(item).data('tag'), tags = tagsStr ? $(this).data('tag').split('|') : [];
        if (findActive) {
            return false;
        }
        for (var i = 0; i < tags.length; i++) {
            var tag = tags[i];
            if (tag && url.indexOf(tag) != -1) {
                $('.aside-nav[data-tag="' + tagsStr + '"]').addClass('active');
                var $second = $(item).closest('.aside-second'), secondH = 0;
                navItemH = item.clientHeight;
                if ($second.length > 0) {
                    $(item).closest('.aside-second').addClass('aside-open');
                    secondH = $second.find('>.aside-dd').children().length * navItemH;
                }
                if ($second.length > 0) {
                    $second.find('>.aside-dd').css('height', secondH);
                }
                findActive = true;
                break;
            }
        }
    });
    if ($('.aside-open').length) {
        $('.aside-open')[0].scrollIntoView(false);
    }
    // 二级菜单
    $('.aside-second>.aside-dt').click(function (e) {
        var $second = $(this).closest('.aside-second'), $first = $(this).closest('.aside-first');
        if ($second.hasClass('aside-open')) {
            var height = $second.find('>.aside-dd').height();
            closeSidebarMenu($second.find('>.aside-dd'), height, function () {
                $second.removeClass('aside-open');
            })
            $second.removeClass('aside-active');
        } else {
            var secondH = $second.find('>.aside-dd').children().length * navItemH;
            $second.addClass('aside-open').addClass('aside-active');
            openSidebarMenu($second.find('>.aside-dd'), secondH);
        }
    });
    $('.aside-second').mouseover(function (e) {
        var width = $(window).width()
        var height =  $(window).height()
        var top = 0
        var flag = false
        if (width <= 1460) {
            if((height - $(this).offset().top) < $(this).find('.aside-second-hide').height()) {
                flag = true
                top = height - $(this).offset().top - $(this).height()
            } else {
                top = $(this).offset().top
            }
            if (flag) {
                $(this).find('.aside-second-hide').addClass('aside-second-hide1').css('bottom', top)
            } else {
                $(this).find('.aside-second-hide').addClass('aside-second-hide1').css('top', top)
            }

        }
    });
    $('.aside-second').mouseleave(function (e) {
        var width = $(window).width()
        if (width <= 1460) {
            $(this).find('.aside-second-hide').removeClass('aside-second-hide1')
        }
    });
    function closeSidebarMenu($el, initH, cb) {
        var height = initH;
        var interval = setInterval(function () {
            height = height - 8;
            $el.css('height', height);
            if (height <= 0) {
                clearInterval(interval);
                typeof cb === 'function' && cb();
            }
        }, 10);
    }

    function openSidebarMenu($el, totalH) {
        var height = 0;
        var interval = setInterval(function () {
            height = height + 8;
            $el.css('height', height);
            if (height >= totalH) {
                clearInterval(interval);
                $el.removeAttr("style");
            }
        }, 10);
    }
</script>
